<template>
  <div class="dynamic-form-container">
    <!-- 多分组时的折叠面板 -->
    <el-collapse v-if="groupedFields.length > 1" v-model="activeGroups">
      <el-collapse-item 
        v-for="group in groupedFields" 
        :key="group.name"
        :name="group.name"
      >
        <template slot="title">
          <span class="group-title">{{ group.name }}</span>
        </template>
        <el-form 
          ref="propertyForm" 
          :model="formData" 
          label-position="right"
          label-width="110px"
          @submit.native.prevent
          class="compact-form"
        >
          <form-field 
            v-for="field in group.fields"
            v-show="shouldShowField(field)"
            :key="field.id"
            :field="field"
            v-model="formData[field.tag]"
            @change="handleFieldChange"
          />
        </el-form>
      </el-collapse-item>
    </el-collapse>
    
    <!-- 单分组时的表单 -->
    <el-form 
      v-else-if="groupedFields.length === 1"
      ref="propertyForm" 
      :model="formData" 
      label-position="right"
      label-width="110px"
      @submit.native.prevent
      class="compact-form"
    >
      <div class="single-group-title">{{ groupedFields[0].name }}</div>
      <form-field 
        v-for="field in groupedFields[0].fields"
        v-show="shouldShowField(field)"
        :key="field.id"
        :field="field"
        v-model="formData[field.tag]"
        @change="handleFieldChange"
      />
    </el-form>
  </div>
</template>

<script>
import FormField from './formField.vue';

export default {
  components: {
    FormField
  },
  props: {
    fields: {
      type: Array,
      default: () => []
    },
    initialData: {
      type: Object,
      default: () => ({})
    },
    confirmBeforeSave: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      activeGroups: [], // 当前展开的分组
      formData: {}
    };
  },
  computed: {
    groupedFields() {
      const groups = {};
      this.fields.forEach(field => {
        if (!field || !field.tag) return;

        const groupName = field.group || '默认分组';
        if (!groups[groupName]) {
          groups[groupName] = {
            name: groupName,
            fields: []
          };
        }
        groups[groupName].fields.push(field);
      });
      return Object.values(groups);
    }
  },
  watch: {
    fields: {
      immediate: true,
      handler() {
        this.initFormData();
        // 默认展开分组
        if (this.groupedFields.length > 0) {
          this.groupedFields.forEach(group => {
            this.activeGroups.push(group.name);
          });
        }
      }
    },
    initialData: {
      deep: true,
      handler() {
        this.initFormData();
      }
    }
  },
  methods: {
    initFormData() {
      const data = {};
      this.fields.forEach(field => {
        if (field && field.tag) {
          data[field.tag] = this.initialData[field.tag] || field.value || '';
        }
      });
      this.formData = data;
    },
    shouldShowField(field) {
      return field && field.tag;
    },
    handleFieldChange(field) {
      console.error(field)
      this.$emit('field-change', {
        field: field.tag,
        showtype: field.showtype,
        value: this.formData[field.tag],
        originalValue: this.initialData[field.tag],
        confirm: this.confirmBeforeSave
      });
    },
    getFormData() {
      return this.formData;
    }
  }
};
</script>

<style lang="scss">
.dynamic-form-container {
  height: 100%;
  overflow-y: auto;
  
  .el-collapse-item__header, .el-collapse-item__wrap, .el-collapse-item__content {
    background-color: transparent;
    color: var(--text-color);
    border-color: var(--text-color);
  }
}

/* 分组标题样式 */
.group-title {
  font-weight: bold;
  font-size: 14px;
  color: var(--text-color);
}

.single-group-title {
  padding: 12px 0;
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 14px;
  color: var(--text-color);
  border-bottom: 1px solid var(--color-primary);
}

/* 标签超出省略 */
.compact-form ::v-deep .el-form-item__label {
  display: inline-block;
  width: 130px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}

.compact-form ::v-deep .el-form-item__label:hover::after {
  content: attr(data-label);
  position: absolute;
  left: 0;
  top: 100%;
  background: var(--bg-color);
  color: var(--text-color);
  border: 1px solid var(--color-primary);
  padding: 5px 10px;
  border-radius: 4px;
  z-index: 100;
  white-space: normal;
  width: max-content;
  max-width: 300px;
}

/* 下拉框和日期选择器宽度 */
.compact-form .el-select,
.compact-form .el-date-editor {
  width: 100%;
}

/* 折叠面板样式 */
.dynamic-form-container .el-collapse {
  border: none;
}

.dynamic-form-container .el-collapse-item__header {
  color: var(--text-color);
  padding-left: 10px;
  font-weight: bold;
}

.dynamic-form-container .el-collapse-item__wrap {
  border-bottom: none;
}

.dynamic-form-container .el-collapse-item__content {
  padding-bottom: 0;
  padding-top: 16px;
}
</style>